<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=uft-8">
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  <META HTTP-EQUIV="Expires" CONTENT="0">
  <title>首页</title>
  <link href="./homeEcharts.css" rel="stylesheet">
  <style>
      html{
          font-size: 62.5%;
      }
  </style>
</head>

<body>
  <!--头部-->
  <div class="top">
    <a></a>
    <a class="top_right" href="#"> 
      <img src="./img/big_rightpic.png">
      <span>进入大数据中心</span>
    </a>
  </div>
   <!--左侧数据定位-->
  <div class="minddle_data">
    <div class="big_title">
      <div class="title1">800,123</div>
      <div class="title2">监控叉车总数</div>
    </div>
    <div class="big_title1">
        <div class="title1">800,123</div>
        <div class="title2">离线叉车</div>
    </div>
    <div class="big_title2">
        <div class="title1">800,123</div>
        <div class="title2">在线叉车</div>
    </div>
  </div>

  <!--内容区-->
  <div style="height: 100%; width: 100%;">
    <div style="display:flex;width:100%;height: 100%;">
      <!--左侧-->
      <div style="width: 56.65%; display: flex;">
          <div id="main5" style="width: 100%;height: 100%;"></div>
      </div>
      <!--中间-->
      <div class="con_middle">
        <div class="syl">
          <div class="syl_title">
            <div class="syl_left">
              <img src="./img/big_yuanpic.png">
              <span class="title">一周使用率</span>
            </div>
            <span class="danwei">(单位:次)</span>
          </div>
          <!--一周使用率 效果图-->
          <div id="main3" style="width:100%;height:29.5rem;"></div>
        </div>
        <!--警告-->
        <div class="jg_title">
          <img src="./img/big_yuanpic.png">
          &nbsp;
          <span class="title">一周使用率</span>
        </div>
        <div style="display: flex;">
          <!--top警告 效果图-->
          <div id="main4" style="width:100%;height:44rem;"></div>
        </div>
      </div>
      <!--右侧-->
      <div class="con_right">
        <!--地区总安装数量-->
        <div class="syl_title">
          <div class="syl_left">
            <img src="./img/big_yuanpic.png">
            <span class="title">地区总安装数量</span>
          </div>
          <span class="danwei">(单位:万台)</span>
        </div>
        <!--地区总安装数量 效果图-->
        <div id="main1" style="width: 100%;height:20rem;"></div>

        <!--告警数量-->
        <div class="gjsl_title">
          <div class="syl_left">
            <img src="./img/big_yuanpic.png">
            <span class="title">告警数量</span>
          </div>
          <span class="danwei">(单位:辆)</span>
        </div>
        <!--告警数量 效果图-->
        <div id="main" style="width: 100%; height: 28.5rem;"></div>

        <!--本月安装数量-->
        <div class="jg_title">
          <img src="./img/big_yuanpic.png">
          &nbsp;
          <span class="title">本月安装数量</span>
        </div>
        <!--本月安装数量 效果图-->
        <div id="main2" style="width: 100%;height:23rem;"></div>
        
      </div>
    </div>
  </div>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'7c6e0dbe10b7a158187252d224b82da3',
    };
   
  </script>
  <script src="https://webapi.amap.com/maps?v=1.4.8&key=ae82f1373cedbca373e78dba0188b6b9"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="./js/package/dist/echarts.js"></script>
  <script src="./echarts-amap.min.js" charset="UTF-8"></script>
  <script type="module">
      import MyEchars from './homeEcharts.js'
        $(function(){
            load()
        })
      function load()
      {
        var echars=new MyEchars(echarts)
      // 极坐标
      echars.createYiZouShiyong(main,['超标未检查', '无证扫码', '打电话报警','抽烟报警'],[300, 800, 450, 700],1000)
      //安装数量
      echars.createInstallNumber(main1,['金华', '义乌','东阳' ,'兰溪', '浦江', '磐安', '塔石', '新狮','武义'],[120, 200, 150, 80, 70, 110, 130,200,50])
      //本月安装数量
      var xdata1=['1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7','1.8','1.9','1.10','1.11','1.12','1.13','1.14','1.15','1.16','1.17','1.18','1.19','1.20','1.21','1.22','1.23','1.24','1.25','1.26','1.27','1.28','1.29','1.30','1.31'];
      var ydata1=[10, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901];
      echars.thisMouthInstallNumber(main2,xdata1,ydata1)
      // 一周使用率
      var xdate2=['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      var ydate2=[50, 280, 500, 100, 270, 300, 550]
      echars.OneWeekUsage(main3,xdate2,ydate2)
      //警告top
      var xdate3=["金华","义乌", "东阳","兰溪","浦江","磐安","塔石", "新狮","武义","永康"]
      var ydate3=[ 101, 881, 2054, 2222, 3551, 4000, 4551,4571, 8522, 9552]
      echars.warningTop(main4,xdate3,ydate3)
      //地图飞线
      var data5=[
        // 出发地
        {
            "name": "金华to东阳",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#bb3f7d"
                }
            },
            "data": [
                {
                    "name": "金华",
                    "value": [119.647265,29.079195]
                }
            ]
        },
        // 动态
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            //"symbol":"arrow",
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 8,
                "symbol":"arrow", // 出现三角形
                "trailLength":0, //控制时候又尾巴效果
                "color":"#fccf02" //配置三角形颜色
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ]
                }
            ]
        },
        // 静态
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "none"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#d9ad28",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2,
                    "type": "dashed"
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ],
                    "value": 95
                }
            ]
        },
        // 目的地
        {
            "name": "金华to东阳",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#bb3f7d"
                }
            },
            "data": [
                {
                    "name": "东阳",
                    "value": [120.24179,29.290158, 95]
                }
            ]
        },
        // 动态
        {
            "name": "金华to衢州",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            //"symbol":"arrow",
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 18, //三角形大小
                "symbol":"arrow", // 出现三角形
                "trailLength":0, //控制时候又尾巴效果
                "color":"#f2449d" //配置三角形颜色
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [118.859307,28.970229]
                    ],
                    "value": 95
                }
            ]
        },
        // 静态
        {
            "name": "金华to衢州",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "none"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#d43f90",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2,
                    "type": "solid"
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "衢州",
                    "coords": [
                        [119.647265,29.079195],
                        [118.859307,28.970229]
                    ],
                    "value": 95
                }
            ]
        },
        // 目的地
        {
            "name": "金华to衢州",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#bb3f7d"
                }
            },
            "data": [
                {
                    "name": "衢州",
                    "value": [118.859307,28.970229]
                }
            ]
        }
    ]
    echars.getMap(main5,data5)
      }




      window.onresize = function()
    {
         document.getElementById('main1').setAttribute('_echarts_instance_', '');
         document.getElementById('main2').setAttribute('_echarts_instance_', '');
         document.getElementById('main3').setAttribute('_echarts_instance_', '');
         document.getElementById('main4').setAttribute('_echarts_instance_', '');
         document.getElementById('main5').setAttribute('_echarts_instance_', '');
    	 load()
    }
  </script>
</body>

</html>